<template>
	<view class="wrap-chart">
		<!-- {{chartData}} -->
		<view class="block-title">
			<u-image src="/static/home/icon_env.png" width="38" height="38" />
			<view class="txt">{{title}}</view>
		</view>

		<view class="condition-block">
			<view class="left">
				<view :class="['item','first-item',{'active':activeIndex === 0}]" @click="switchCondition(0)">日
				</view>
				<view :class="['item','item-center',{'active':activeIndex === 1}]" @click="switchCondition(1)">月
				</view>
				<view :class="['item','item-center',{'active':activeIndex === 2}]" @click="switchCondition(2)">年
				</view>
				<view :class="['item','last-item',{'active':activeIndex === 3}]" @click="switchCondition(3)">总
				</view>
			</view>
			<picker mode="date" :fields="dateMode" :value="currentDate" @change="changeDate" v-show='dateMode'>
				<view class="right">
					<view class="uni-input">{{currentDate}}</view>
					<u-icon name="arrow-down-fill" />
				</view>
			</picker>
		</view>

		<view class="chart-box">
			<view v-if="isNotEmpty">
				<mpvue-echarts :echarts="echarts" :onInit="initChart" canvasId="line" ref="chartBlock" />
			</view>
			<u-empty v-else></u-empty>
		</view>

	</view>
</template>

<script>
	import * as echarts from '@/components/echarts/echarts.js';
	import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';

	let opts = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'line',
				lineStyle: {
					color: 'rgba(0,0,0,0.2)',
					width: 1,
					type: 'solid'
				}
			}
		},
		grid: {
			// left: '20%',
			top: '10%',
			right: 0,
			bottom: '10%'
		},
		xAxis: {
			type: 'category',
			axisLine: {
				lineStyle: {
					color: "#999"
				}
			},
			axisLabel: {
				color: '#999',
				interval: 38,
				fontSize: 10
			},
			data: [] //fill
		},
		yAxis: {
			name: 'KWh',
			type: 'value',
			axisLabel: {
				formatter: '{value}'
			},
			axisLine: {
				lineStyle: {
					color: "#999"
				}
			}
		},
		series: {
			type: 'line',
			data: []
		} //fill
	}

	export default {
		props: {
			stationId: null,
			title: {
				type: String,
				default: '发电趋势'
			}
		},
		components: {
			mpvueEcharts
		},
		data() {
			return {
				echarts: echarts,
				loadFinish: false,
				activeIndex: 0,
				today: null,
				currentDate: null,
				dateMode: 'day'
			}
		},
		beforeMount() {
			this.currentDate = this.$u.timeFormat(new Date(), 'yyyy-mm-dd')
			this.today = this.currentDate
		},
		computed: {
			//判断数据是否全空，如果-就是全空，shit code.
			isNotEmpty() {
				return true;
				if (this.chartData.series.length === 0) return false
				if (this.chartData.series[0].data.length === 0) return false
				return this.chartData.series[0].data.some(item => item !== null)
			}
		},
		methods: {
			initChart(canvas, width, height) {
				let chart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				chart.setOption(opts)
				canvas.setChart(chart)
				return chart
			},
			switchCondition(index) {
				if (this.activeIndex === index) return
				this.activeIndex = index
				if (index === 0) {
					this.dateMode = 'day'
					this.currentDate = this.today
				} else if (index === 1) {
					this.dateMode = 'month'
					this.currentDate = this.today.substring(0, 7)
				} else if (index === 2) {
					this.dateMode = 'year'
					this.currentDate = this.today.substring(0, 4)
				} else if (index === 3) {
					this.dateMode = null
					this.currentDate = ",,"
				}
				this.loadChartInfo()
			},
			changeDate(e) {
				this.currentDate = e.target.value
				this.loadChartInfo()
			},
			loadChartInfo() {
				if (this.stationId === null || this.stationId === undefined) { //查所有
					// console.error('loadChartInfo=', this.currentDate)
					this.$u.api.getChartInfo({
						date: this.currentDate
					}).then(res => {
						this.handleData(res, true)
					})
				} else { //查某个站点
					this.$u.api.getStationChartInfo({
						stationId: this.stationId,
						date: this.currentDate
					}).then(res => {
						this.handleData(res, false)
					})
				}
			},
			handleData(res, isAll) {
				if (res.error_code !== 0) return
				if (this.activeIndex === 0) {
					opts.yAxis.name = 'KW'
					opts.xAxis.axisLabel.interval = 38
					opts.yAxis.axisLabel.formatter = isAll ? '{value}k' : '{value}' //单位
					let ssgl = res.data.ssgl //功率
					let ydata_ssgl = []
					ssgl.ydata.forEach((item, index) => {
						if (item && item !== '-') {
							let val = 0
							if (isAll) {
								val = parseFloat(item) / 1000
							} else {
								val = parseFloat(item)
							}
							ydata_ssgl.push(parseFloat(val.toFixed(2)))
						} else {
							ydata_ssgl.push(null)
						}
					})
					opts.series = [{
						type: 'line',
						color: '#91CB74',
						data: ydata_ssgl
					}]
					opts.xAxis.data = ssgl.xdata
				} else {
					opts.yAxis.axisLabel.formatter = this.activeIndex === 1 ? '{value}k' : '{value}' //单位
					opts.xAxis.axisLabel.interval = 'auto'
					//月视图是不需要除以1000的，还是kwh
					opts.yAxis.name = this.activeIndex === 1 ? 'KWh' : 'MWh'
					let fdl = res.data.fdl
					let ydata = []
					fdl.ydata.forEach((item, index) => {
						if (item && item !== '-') {
							let val = parseFloat(item) / 1000
							ydata.push(parseFloat(val.toFixed(2)))
						} else {
							ydata.push(null)
						}
					})
					let xdata = []
					//处理日期
					if (this.activeIndex === 1) {
						xdata = fdl.xdata.map(item => item.substring(8, 10))
					} else if (this.activeIndex === 2) {
						xdata = fdl.xdata.map(item => item.substring(5))
					} else if (this.activeIndex === 3) {
						xdata = fdl.xdata
					}
					opts.series = [{
						type: 'bar',
						color: '#91CB74',
						data: ydata
					}]
					opts.xAxis.data = xdata
				}
				this.$refs.chartBlock.init()
				this.loadFinish = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap-chart {
		// height: 600upx;
		padding: 28upx 32upx;
		// background: red;

		.block-title {
			display: flex;
			align-items: center;

			.txt {
				margin-left: 10upx;
				font-weight: 400;
				font-size: 28upx;
				color: #999;
			}
		}

		.condition-block {
			margin: 34upx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				width: 330upx;
				display: flex;
				background-color: #EBF4FF;
				height: 60upx;
				color: #333;
				font-size: 28upx;
				border-radius: 35upx;
				border: 1upx solid #378FFA;

				.first-item {
					border-top-left-radius: 36upx;
					border-bottom-left-radius: 36upx;
				}

				.item-center {
					border-left: 1upx solid #378FFA;
				}

				.item {
					line-height: 62upx;
					width: 110upx;
					text-align: center;
				}

				.last-item {
					border-top-right-radius: 36upx;
					border-bottom-right-radius: 36upx;
					border-left: 1upx solid #378FFA;
				}

				.active {
					background-color: #378FFA;
					color: #fff;
				}
			}

			.right {
				width: 198upx;
				height: 60upx;
				border-radius: 40upx;
				border: 1px solid #378FFA;
				text-align: center;
				line-height: 60upx;
				font-size: 24upx;
				font-weight: 400;
				color: #378FFA;
				display: flex;
				justify-content: space-around;
				padding: 0 15upx;
			}
		}

		.chart-box {
			width: 100%;
			height: 540upx;
			// background: green;
		}
	}
</style>
